<template>
	<view class="content1">
		<!-- banner -->
		<view class="bannerBox">
			<swiper class="swiper" autoplay="true" indicator-dots="true">
				<swiper-item class="swiperItem">
					<image style="width:100%" src="../../static/swiper1.jpg" mode=""></image>
				</swiper-item>
				<swiper-item class="swiperItem">
					<image src="../../static/swiper2.jpg" mode=""></image>
				</swiper-item>
				<swiper-item class="swiperItem">
					<image src="../../static/swiper3.jpg" mode=""></image>
				</swiper-item>
			</swiper>
		</view>
		<!-- banner -->
		<!-- banner图下导航 -->
		<view class="contentNav">
			<view class="navItem">
				<image src="../../static/kook-list.png" mode=""></image>
				<text>分类</text>
			</view>
			<view class="navItem">
				<image src="../../static/kook-list.png" mode=""></image>
				<text>排行</text>
			</view>
			<view class="navItem">
				<image src="../../static/kook-list.png" mode=""></image>
				<text>书单</text>
			</view>
			<view class="navItem">
				<image src="../../static/ranking.png" mode=""></image>
				<text>每日推荐</text>
			</view>
			<view class="navItem">
				<image src="../../static/ranking.png" mode=""></image>
				<text>书荒</text>
			</view>
		</view>
		<!-- banner图下导航 -->
		<!-- 内容主体1 -->
		<view class="contentFloor1" v-for="i in [1,2]" :key="i">
			<view class="topPart">
				<view class="content">本周爆款，人气热区</view>
				<view class="more">更多<uni-icon class="icon" type="arrowright"></uni-icon>
				</view>
			</view>
			<view class="center">
				<image src="../../static/mushenji.jpg" mode=""></image>
				<view class="centerRight">
					<view class="title">
						牧神记
					</view>
					<view class="introduction">
						大墟的祖训说，天黑，别出门。　　大墟残老村的老弱病残们从江边捡到了一个婴儿，取名秦牧，含辛茹苦将他养大。这一天夜幕降临，黑暗笼罩大墟，秦牧走出了家门
					</view>
					<view class="detail">
						<view class="author">
							<uni-icon type="person"></uni-icon>
							萧瑾瑜
						</view>
						<view class="right">
							<view class="classifinacation">东方玄幻</view>
							<view class="score">
								9.0分
							</view>
						</view>
					</view>
				</view>
		
			</view>
			<view class="bottom">
				<view class="btmItem">
					<image src="../../static/mushenji.jpg" mode=""></image>
					<view class="txt">穿越到司时间后爱人变成皇帝</view>
				</view>
				<view class="btmItem">
					<image src="../../static/mushenji.jpg" mode=""></image>
					<view class="txt">最佳女婿</view>
				</view>
				<view class="btmItem">
					<image src="../../static/mushenji.jpg" mode=""></image>
					<view class="txt">我不想继承亿万家产</view>
				</view>
				<view class="btmItem">
					<image src="../../static/mushenji.jpg" mode=""></image>
					<view class="txt">太古剑尊</view>
				</view>
			</view>
		</view>
		<!-- 内容主体1 -->
		<!-- 内容主体2 -->
		<view class="contentFloor2">
			<view class="title">
				猜你喜欢
			</view>
			<view class="likeList">
				<view class="liveItem" v-for="i in 10" :key="i" @click="goBookDetail">
					<image src="../../static/mushenji.jpg" mode=""></image>
					<view class="centerRight">
						<view class="title">
							牧神记
						</view>
						<view class="introduction">
							大墟的祖训说，天黑，别出门。　　大墟残老村的老弱病残们从江边捡到了一个婴儿，取名秦牧，含辛茹苦将他养大。这一天夜幕降临，黑暗笼罩大墟，秦牧走出了家门
						</view>
						<view class="detail">
							<view class="author">
								<uni-icon type="person"></uni-icon>
								萧瑾瑜
							</view>
							<view class="right">
								<view class="classifinacation">东方玄幻</view>
								<view class="score">
									9.0分
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 内容主体2 -->
	</view>
</template>

<script>
	import { uniIcon } from "@dcloudio/uni-ui"
	export default {
		components: {
			uniIcon
		},
		data() {
			return {
				
			}
		},
		methods: {
			goBookDetail(){
				uni.navigateTo({
					url:'../../pages/bookDetail/bookDetail'
				})
			},
		}
	}
</script>

<style lang="scss">
	.content1{
		// banner
		overflow: hidden;
		.bannerBox {
			padding: 1px 12px;
		
			.swiper {
				border-radius: 3px;
				overflow: hidden;
		
				.swiperItem {
					width: 100%;
		
					image {
						width: 100%;
					}
				}
		
				.uni-swiper-dots-horizontal {
					position: absolute;
					right: 30px;
				}
			}
		}
		
		// bnner下导航
		.contentNav {
			padding: 16px 0;
			display: flex;
			justify-content: space-around;
			border-bottom: 7px solid #eee;
		
			.navItem {
				display: flex;
				flex-direction: column;
				align-items: center;
		
				image {
					width: 36px;
					height: 36px;
				}
		
				text {
					font-size: 14px;
					color: #666;
				}
			}
		
		}
		
		// 内容主体1
		.contentFloor1 {
			padding: 10px;
			border-bottom: 8px solid #eee;
		
			.topPart {
				padding: 0px 4px 20px 0px;
				display: flex;
				justify-content: space-between;
		
				.content {
					font-size: 16px;
					font-weight: bold;
				}
		
				.more {
					font-size: 14px;
					color: #666;
		
					.icon {
						font-size: 18px !important;
					}
				}
			}
		
			.center {
				display: flex;
		
				>image {
					width: 200px;
					height: 100px;
				}
		
				.centerRight {
					padding: 0px 0px 10px 16px;
		
					.title {
						font-size: 16px;
						padding: 0 0 8px 0;
					}
		
					.introduction {
						font-size: 12px;
						color: #666;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						border-bottom: 14px solid white;
					}
		
					.detail {
						font-size: 12px;
						display: flex;
						justify-content: space-between;
		
						.author {
							color: #666;
						}
		
						.right {
							display: flex;
		
							view {
								font-size: 10px;
								background: #eee;
								padding: 6px;
								height: 10px;
								border-radius: 10px;
								line-height: 10px;
								color: #666;
							}
						}
					}
		
				}
			}
		
			.bottom {
				display: flex;
				justify-content: space-between;
		
				.btmItem {
					width: 80px;
		
					image {
						width: 100%;
						height: 100px;
					}
		
					.txt {
						font-size: 12px;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						border-bottom: 14px solid white;
					}
				}
			}
		
		}
		
		// 主题内容2
		.contentFloor2 {
			padding: 8px 10px;
		
			>.title {
				font-size: 16px;
				font-weight: bolder;
				padding-bottom: 20px;
			}
		
			.liveItem {
				display: flex;
				padding-bottom: 10px;
				>image {
					width: 200px;
					height: 100px;
				}
		
				.centerRight {
					padding: 0px 0px 10px 16px;
		
					.title {
						font-size: 16px;
						padding: 0 0 8px 0;
					}
		
					.introduction {
						font-size: 12px;
						color: #666;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						border-bottom: 14px solid white;
					}
		
					.detail {
						font-size: 12px;
						display: flex;
						justify-content: space-between;
		
						.author {
							color: #666;
						}
		
						.right {
							display: flex;
		
							view {
								font-size: 10px;
								background: #eee;
								padding: 6px;
								height: 10px;
								border-radius: 10px;
								line-height: 10px;
								color: #666;
							}
						}
					}
				}
			}
		}
	}
</style>
